<template>
    <div class="circle-container">
        <header class="circle-header">
            <div :class="{'circle-header-item': true, 'circle-select': cur == 4}" @click="changeCircle(4)"><span>即将上线</span></div>
            <div :class="{'circle-header-item': true, 'circle-select': cur == 1}" @click="changeCircle(1)"><span>内购中</span></div>
            <div :class="{'circle-header-item': true, 'circle-select': cur == 2}" @click="changeCircle(2)"><span>已发行</span></div>
        </header>
        <router-link class="search-btn" to="/searchCircle" tag="div"></router-link>
        <div>
            <circle-box :circleList="circleList" :status="cur"></circle-box>
        </div>
    </div>
</template>
<script>
import market from '@/api/market.js'
import circleBox from './circleBox.vue'
export default {
    components: {
        circleBox
    },
    data () {
        return {
            selected: '',
            cur: 1,
            circleList: [],
            pageNum: 1,
            haveAll: true
        }
    },
    beforeRouteEnter (to, from, next) {
        if (from.name === 'Market') {
            next(vm => {
                vm.cur = 1
                vm.circleList = []
                vm.init()
            })
        } else {
            next()
        }
    },

    created () {
        this.init()
    },
    methods: {
        init() {
            this.getList(this.cur, this.pageNum)
            window.onscroll = function () {
                var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
                var clientH = document.documentElement.clientHeight || document.body.clientHeight; 
                if (scrollT >= scrollH - clientH && this.haveAll) {
                    this.pageNum++
                    this.getList(this.cur, this.pageNum)
                }
            }.bind(this)
        },
        changeCircle (index) {
            this.cur = index
            this.pageNum = 1
            this.circleList = []
            this.getList(index, this.pageNum)
        },
        getList (type, page) {
            market.getCircleList (type, page).then(res => {
                if (res.code == 0) {
                    if (res.t) {
                        this.circleList = this.circleList.concat(res.t) 
                    } else {
                        this.haveAll = false
                    }
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .circle-container {
        .circle-header {
            display: flex;
            font-size: 0.3rem;
            height: 0.7rem;
            box-sizing: border-box;
            padding: 0.21rem 0;
            border-bottom: 1px solid #ccc;
            .circle-header-item {
                flex: 1;
                text-align: center;
                color: #707070;
                font-size: 0.3rem;
                line-height: 0.3rem;
                border-right: 1px solid #707070;
                &:last-child {
                    border-right: none;
                }
                span {
                    display: inline-block;
                    height: 0.42rem;
                }
            }
            .circle-select {
                color: #29abae;
                span {
                    border-bottom: 3px solid #29abae;
                }
            }
        }
        .search-btn {
            width: 1.02rem;
            height: 1.02rem;
            background: url(../../../assets/img/search-icon.png) no-repeat;
            background-size: 100%;
            position: fixed;
            bottom: 0.45rem;
            right: 0.45rem;
        }
    }
</style>

